import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Input, Popconfirm, Row, Select, Table} from 'antd';
import Constants from '../../utils/Constants';
import RightConstants from '../../utils/RightConstants';
import RightBox from '../../components/common/rightBox';
import IncidentalsDetail from '../../components/quotationSupport/incidentals/incidentalsDetail';

const FormItem = Form.Item;

const incidentals = Form.create()(class incidentals extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'incidentals/getListForPage', payload: { page: Constants.DEFAULT_PAGE } });
    }


    handleOpen = (id, disabled) => {
        this.props.dispatch({
            type: 'incidentals/getById',
            payload: {
                id,
            }
        });
        this.props.dispatch({ type: 'supplier/getSupplierList', payload: { supplierType: Constants.SUPPLIER_TYPE.FRAE } });  //查询物流供应商
        this.incidentalsDetail.handleOpen(disabled);
    }

    handleDelete = id => {
        this.props.dispatch({
            type: 'incidentals/deleteById',
            payload: {
                id,
                onSuccess: this.handleSearch
            }
        })
    }

    handleSearch = flag => {
        let newPage = this.props.incidentals.page;
        if (flag) newPage.page = 1;
        this.props.dispatch({
            type: 'incidentals/getListForPage',
            payload: {
                ...this.props.form.getFieldsValue(),
                page: newPage
            }
        });
    };

    columns = [
        { title: '费用项代码', dataIndex: 'feeCode', key: 'feeCode' },
        { title: '费用项名称', dataIndex: 'feeName', key: 'feeName' },
        { title: '20GP费用', dataIndex: 'fee20gp', key: 'fee20gp' },
        { title: '40GP费用', dataIndex: 'fee40gp', key: 'fee40gp' },
        { title: '40HQ费用', dataIndex: 'fee40hq', key: 'fee40hq' },
        { title: '单票费用', dataIndex: 'feeSingle', key: 'feeSingle' },
        { title: '费用类型', render(record) {
                if(record.feeType == '1') {
                    return '报关杂费';
                }else if(record.feeType == '2') {
                    return '拖车杂费';
                }else {
                    return '未知';
                }
            }},

        { title: '创建人', dataIndex: 'creatorName', key: 'creatorName' },
        { title: '创建时间', dataIndex: 'createtime', key: 'createtime' },
        {
            title: '操作',
            render: (record) => {
                let editLink = <RightBox resource={RightConstants.QUOTATIONSUPPORT.QUOTATIONSUPPORT_INCIDENTALS_EDIT} split={true}><a href="#" onClick={this.handleOpen.bind(this, record.id, false)}>编辑</a></RightBox>
                let deleteLink = <Popconfirm onConfirm={this.handleDelete.bind(this, record.id)} okText="是" cancelText="否"
                    placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除?'}>
                    <a href="#">删除</a>
                </Popconfirm>
                deleteLink = <RightBox resource={RightConstants.QUOTATIONSUPPORT.QUOTATIONSUPPORT_INCIDENTALS_DELETE} split={true}>{deleteLink}</RightBox>
                let viewLink = <a href="#" onClick={this.handleOpen.bind(this, record.id, true)}>查看</a>
                return <span>{editLink}{deleteLink}{viewLink}</span>
            }
        }
    ];


    render() {
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 16 } };
        const { getFieldDecorator } = this.props.form;
        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.incidentals.page.size,
            current: this.props.incidentals.page.page,
            total: this.props.incidentals.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.incidentals.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'incidentals/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.incidentals.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'incidentals/getListForPage',
                    payload: {
                        ...this.props.form.getFieldsValue(),
                        page: newPage
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={6}>
                        <FormItem {...formItemLayout} label={'费用编码'}>
                            {getFieldDecorator('feeCode')
                                (
                                <Input maxLength="100" placeholder="费用编码" />
                                )
                            }
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem {...formItemLayout} label={'费用名称'}>
                            {getFieldDecorator('feeName')
                                (
                                <Input maxLength="200" placeholder="费用名称" />
                                )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={6}>
                        <FormItem {...formItemLayout} label={'费用类型'}>
                            {getFieldDecorator('feeType')
                            (
                                <Select style={{ width: 220 }} allowClear>
                                    <Select.Option value="">全部</Select.Option>
                                    <Select.Option value="1">报关杂费</Select.Option>
                                    <Select.Option value="2">拖车杂费</Select.Option>
                                </Select>
                            )
                            }
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <span style={{float: 'right'}}>
                            <Button type="primary" icon="search" style={{marginRight: 5}} onClick={this.handleSearch.bind(this, true)} size={'default'}>查询</Button>
                            <RightBox resource={RightConstants.QUOTATIONSUPPORT.QUOTATIONSUPPORT_INCIDENTALS_ADD}>
                                <Button type="primary" icon="plus" style={{marginRight: 5}} onClick={this.handleOpen.bind(this, null, false)} size={'default'}>新增杂费</Button>
                            </RightBox>
                        </span>
                    </Col>
                </Row>


                <Table loading={this.props.loading} rowKey='id' dataSource={this.props.incidentals.list}
                       columns={this.columns} bordered={true} size={'middle'} pagination={pagination}/>
                <IncidentalsDetail wrappedComponentRef={(inst) => this.incidentalsDetail = inst}
                                refreshList={this.handleSearch}/>
            </div>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.incidentals, incidentals: state.incidentals
    };
}

export default connect(mapStateToProps)(incidentals);
